<template>
  <div class="Count">
    <h2>Count</h2>
    <h2>当前的num值:{{$store.state.Count.num}}</h2>
    <h2>{{num}}</h2>
    <h2>当前的addNum值是:{{ addNum }}</h2>
    <h3>下边的组件电影总共有{{ movieList.length }}个</h3>
    <div>
        <button @click="increment">累加num</button>
        <button @click="incrementN({n:2})">累加N--num</button>
        <button @click="incrementWait">延迟1s累加</button>
        <button @click="incrementNWait({n:2})">延迟1s累加</button>
    </div>
  </div>
</template>

<script>
import {  mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  methods: {
    ...mapMutations("Count",["increment", "incrementN"]),
    ...mapActions("Count",["incrementNWait", "incrementWait"]),
  },
  computed:{
    ...mapState("Count", ["num"]),
    ...mapGetters("Count", ["addNum"]),
    ...mapState("Movie", ["movieList"]),
  }
};
</script>

<style>
.Count {
  background-color: skyblue;
}
</style>